<template>
    <div class="echartWrap">
        <!-- 饼图 -->
        <template v-if="type == 'pie'">
            <Pie :type="type" :setting="setting" :data="data"></Pie>
        </template>
        <!-- 柱形图 -->
        <template v-else-if="['bar',].includes(type)">
            <Bar :type="type" :setting="setting" :data="data"></Bar>
        </template>
        <template v-else-if="['category'].includes(type)">
            <!-- 面积图 -->
            <Areas :type="type" :setting="setting" :data="data"></Areas>
        </template>
        <template v-else-if="['line'].includes(type)">
            <!-- 折线图 -->
            <Lines :type="type" :setting="setting" :data="data"></Lines>
        </template>
    </div>
</template>
<script>
import Pie from './components/pie.vue';
import Bar from './components/bar.vue';
import Areas from './components/areas.vue';
import Lines from './components/lines';
export default {
    name: 'Echarts',
    components: { Pie, Bar, Areas, Lines, },
    props: {
        // 类型
        type: {
            type: String,
            default: () => ''
        },
        setting: {
            type: Object,
            default: () => { }
        },
        data: {
            type: [Object, Array],
            default: () => [],
        }
    },
    mounted() {
    }
}
</script>
<style lang="less" scoped>
.echartWrap {
    width: 100%;
    height: 100%;
}
</style>